<template>
  <div class="common_page manageList_wrap" v-loading="loading">
    <template v-if="control">
      <template v-if="actList.length">
        <el-table :data="actList" style="width: 100%">
          <el-table-column label="活动名称" width="400px">
            <template slot-scope="scope">
              <div class="name_wrap">
                <div class="title">{{ scope.row.title }}</div>
                <div class="date">
                  创建时间：{{
                    formatDate(new Date(scope.row.createdTime).getTime())
                  }}
                </div>
                <div class="date">
                  投票时间：{{
                    formatDate(new Date(scope.row.beginTime).getTime())
                  }}-{{ formatDate(new Date(scope.row.endTime).getTime()) }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="活动状态" align="center">
            <template slot-scope="scope">
              <div class="status">{{ scope.row.status | filterSource }}</div>
            </template>
          </el-table-column>
          <el-table-column label="总票数" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.vc }}</div>
            </template>
          </el-table-column>
          <el-table-column label="选手数" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.cc1 || 0 }}</div>
            </template>
          </el-table-column>
          <el-table-column label="访问量" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.pv }}</div>
            </template>
          </el-table-column>
          <el-table-column label="待审核评论" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.pacc2 || 0 }}</div>
            </template>
          </el-table-column>
          <el-table-column label="待审核选手" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.pacc1 || 0 }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-dropdown placement="bottom" trigger="click">
                <span class="setting">
                  设置<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="handleEditor(scope.row)"
                    >编辑</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="handlePublish(scope.row)"
                    >发布活动</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="handleComment(scope.row)"
                    >评论管理</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="handleTotal(scope.row)"
                    >投票统计</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="handleRank(scope.row)"
                    >票数排行</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="handleCopy(scope.row)"
                    >复制活动</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="handleClear(scope.row)"
                    >清除数据</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="handleDelete(scope.row)"
                    >删除</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination_wrap">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="query.pageSize"
            :total="total"
            :current-page="query.pageNum"
            @current-change="handleChangePage"
          >
          </el-pagination>
        </div>
      </template>
      <template v-else>
        <div class="noData_wrap">
          <div class="noData-box">
            <img
              src="../../../../src/assets/images/manage.de8c9e12.png"
              alt=""
            />
            <span>您还没有活动哦！</span>
            <el-button @click="handleAct" type="primary">创建活动</el-button>
          </div>
        </div>
      </template>
    </template>

    <el-dialog
      :visible.sync="centerDialogVisible"
      width="700px"
      center
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      custom-class="Pub"
    >
      <div class="publish_box" ref="publish_box">
        <div class="box_l">
          <iframe id="iframe_wrap" :src="url + '&id=' + current.id"></iframe>
        </div>
        <div class="box_r">
          <div class="act_title">{{ current.title }}</div>
          <div class="qr_box">
            <div class="qr_wrap">
              <qr-code @handleQR="handleQR" :voteId="current.id"></qr-code>
              <div class="tips_wrap" @click="download">
                <span class="name">下载二维码</span>
              </div>
            </div>
            <span>扫码参与投票</span>
          </div>

          <div class="url-tips">本活动网址</div>
          <el-tooltip content="点击复制网址" placement="bottom">
            <div class="textarea" @click="copy">
              <el-input
                ref="code"
                type="textarea"
                :rows="2"
                readonly
                :value="qrUrl"
              ></el-input>
            </div>
          </el-tooltip>

          <div class="qr-tips">
            请将本网址放到公众号自定义菜单或微信文章的阅读原文处发布活动
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="showClear"
      width="450px"
      title="清除数据"
      center
      :close-on-click-modal="false"
      :modal-append-to-body="false"
    >
      <div class="clear_wrap">
        <div class="title">{{ current.title }}</div>
        <div class="ckeckBox">
          <div class="name">清空选项</div>
          <div>
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                :label="item.value"
                v-for="(item, index) in contestantData"
                :key="index"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </div>

        <div class="clear_btn_box">
          <el-button class="cancel" @click="showClear = false">取消</el-button>
          <el-button class="sure" @click="handleSure">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { formatDate } from "@/utils/filter";
import qrCode from "@/components/qrCode";
export default {
  components: {
    qrCode,
  },
  data() {
    return {
      query: {
        name: "",
        pageNum: 1,
        pageSize: 5,
        status: "",
      },
      total: 0,
      actList: [],
      centerDialogVisible: false,
      current: {},
      qrUrl: "",
      showClear: false,
      contestantData: [],
      checkList: [],
      control: false,
    };
  },
  computed: {
    ...mapGetters("menu", {
      listType: "listType",
    }),
    ...mapGetters("status", {
      loading: "loading",
      url: "url",
    }),
  },
  filters: {
    filterSource(value) {
      let str = "";
      switch (value) {
        case "READY":
          str = "未开始";
          break;
        case "BEGAN":
          str = "进行中";
          break;
        case "ENDED":
          str = "已结束";
          break;
        case "CLOSED":
          str = "已关闭";
          break;

        default:
          break;
      }
      return str;
    },
  },
  watch: {
    listType: function (newVal) {
      this.query.status = newVal;
      this.query.pageNum = 1;
      this.getActList();
    },
  },
  created() {
    //获取活动列表
    this.$store.commit("menu/SET_MANAGELISTType", "");
    this.getActList();
  },
  methods: {
    //删除活动
    handleDelete(item) {
      console.log(item);
      this.$confirm("确认删除该活动吗？", "删除活动", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api("vote.deleteVote", {
            id: item.id,
          }).then((res) => {
            console.log(res);
            this.$message({
              message: "删除成功",
              type: "success",
              duration: 1000,
            });
            this.getActList();
          });
        })
        .catch(() => {});
    },
    formatDate,
    getActList() {
      this.$api("vote.list", this.query).then((res) => {
        this.actList = res.data;
        this.total = res.count;
        this.control = true;
      });
    },
    handleChangePage(val) {
      console.log(val);
      this.query.pageNum = val;
      this.getActList();
    },
    //创建模板
    handleAct() {
      this.$router.push({
        path: "/formBoard/createAct",
      });
    },
    handleEditor(item) {
      this.$router.push({
        path: "/manage/setup",
        query: {
          t: "act",
          id: item.id,
        },
      });
    },
    handleRank(item) {
      this.$router.push({
        path: "/manage/rankList",
        query: {
          id: item.id,
        },
      });
    },
    //发布活动
    handlePublish(item) {
      this.current = item;
      this.centerDialogVisible = true;
    },
    handleQR(qrUrl) {
      this.qrUrl = qrUrl;
    },
    handleTotal(item) {
      this.$router.push({
        path: "/manage/statistical",
        query: {
          id: item.id,
        },
      });
    },
    //下载二维码
    download() {
      let oQrcode = document.querySelectorAll(".qr_box img");
      let url = oQrcode[0].src;
      let a = document.createElement("a");
      let event = new MouseEvent("click"); // 下载图名字
      a.download = this.current.title;
      a.href = url; // 合成函数，执行下载
      a.dispatchEvent(event);
    },
    //复制网址
    copy() {
      let copyText = this.$refs.code;
      copyText.select(); // 选择对象
      document.execCommand("Copy");
      this.$message({
        message: "复制成功",
        type: "success",
        duration: 1000,
      });
    },
    //复制活动
    handleCopy(item) {
      this.$api("vote.copyVote", {
        id: item.id,
      }).then((res) => {
        console.log(res);
        this.$message({
          message: "复制成功",
          type: "success",
          duration: 1000,
        });
        this.getActList();
      });
    },
    //评论管理
    handleComment(item) {
      this.$router.push({
        path: "/manage/comment",
        query: {
          id: item.id,
        },
      });
    },
    //清除选手数据
    handleClear(item) {
      this.current = item;
      this.$api("vote.getOptions").then((res) => {
        console.log(res);
        this.contestantData = res;
        this.showClear = true;
      });
    },
    //确定清除
    handleSure() {
      console.log(this.checkList);
      if (this.checkList.length) {
        this.$api("vote.clearcontestantdata", {
          id: this.current.id,
          options: this.checkList,
        }).then((res) => {
          console.log(res);
          this.showClear = false;
          this.$message({
            message: "清除成功",
            type: "success",
            duration: 2000,
            onClose: () => {
              this.checkList = [];
            },
          });
        });
      } else {
        this.$message({
          message: "请先选择清空选项",
          type: "error",
          duration: 2000,
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.manageList_wrap {
  .pagination_wrap {
    margin-top: 20px;
  }
  .name_wrap {
    font-size: 14px;
    .title {
      font-weight: 600;
    }
  }
  .status {
    color: #00bd27;
  }
  .setting {
    cursor: pointer;
    &:hover {
      color: $themeColor;
    }
  }
  .noData_wrap {
    margin: 0 auto;
    width: 155px;
    margin-top: 15%;
    .noData-box {
      text-align: center;
      img {
        width: 100%;
        height: auto;
      }
      span {
        display: inline-block;
        padding: 10px 0;
      }
      ::v-deep.el-button {
        margin-top: 20px;
      }
    }
  }

  ::v-deep.Pub {
    .el-dialog__header{
      padding: 0;
    }
    .el-dialog__body {
      padding: 0;
    }
  }
  .publish_box {
    display: flex;
    height: 600px;
    .box_l {
      flex: 1;
      #iframe_wrap {
        width: 100%;
        height: 100%;
      }
    }
    .box_r {
      flex: 1;
      padding: 0 15px;
      .act_title {
        margin-top: 30px;
        margin-bottom: 35px;
        text-align: center;
        font-size: 16px;
      }
      .qr_box {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .qr_wrap {
          width: 200px;
          height: 200px;
          position: relative;
          cursor: pointer;
          .tips_wrap {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            z-index: 6;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0);
            opacity: 0;
            &:hover {
              opacity: 1;
              background: rgba(0, 0, 0, 0.6);
              .name {
                color: #fff;
                font-size: 14px;
              }
            }
          }
        }

        span {
          font-size: 14px;
          color: #606266;
          margin-top: 10px;
        }
      }
      .url-tips {
        margin-bottom: 10px;
        margin-top: 15px;
      }
      .textarea {
        cursor: pointer;
      }
      .qr-tips {
        margin-top: 10px;
        line-height: 20px;
      }
    }
  }
  .clear_wrap {
    .title {
      font-size: 16px;
      padding: 20px 0;
    }
    .ckeckBox {
      margin-top: 10px;
      display: flex;
      align-items: center;
      .name {
        font-size: 14px;
        margin-right: 10px;
      }
    }
    .clear_btn_box {
      margin-top: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      .cancel {
        &::v-deep.el-button {
          background-color: #fff;
        }
      }
      .sure {
        margin-left: 15px;
        &::v-deep.el-button {
          background-color: $themeColor;
          color: #fff;
          border: 0;
        }
      }
      ::v-deep.el-button {
        width: 100px;
        display: block;
        padding: 8px 20px;
      }
    }
  }
}
</style>